<script setup lang="ts">
import { Modal } from 'ant-design-vue';
import { storeToRefs } from 'pinia';

import { svg1688 } from '#/base';
// const props = defineProps<{
//   modelValue?: boolean;
// }>();
import { auto1688stor, payOrderStore } from '#/store';

import BodyContent from './bodyContent.vue';

// 获取路由参数

// const route = useRoute();

const auto1688storTres = auto1688stor();
const openStatus = defineModel();
const payOrder = payOrderStore();
const {
  // payType,
  upPterLodin,
  payTypeName,
  selectItemInfos,
  nowUse1688Shop,
  inLine,
} = storeToRefs(payOrder);
// const router = useRouter();
// onMounted(() => {
//   if (!nowUse1688Shop.value || !nowUse1688Shop.value.shopName) {
//     Modal.confirm({
//       title: '没有使用中的1688账号',
//       content: '没有使用中的1688账号，前往查看 点击使用',
//       onOk() {
//         // window.open('/getgoods/1688shop');
//         router.push('/shop-auth/shop-auth-home');
//       },
//     });
//   }
// });
// const inLine = payOrder.inLine;
function toOpen1688Pay() {
  Modal.confirm({
    title: '提示',
    content: '是否成功开通免密支付',
    okText: '已开通',
    cancelText: '开通失败',
    onOk() {
      auto1688storTres.lodingGetShop = false;
      auto1688storTres.auto1688BindShop();
    },
    onCancel() {},
  });
  // 开通后需要异步查询 回调数据
  window.open(
    `https://work.1688.com/?spm=a261p.2203641.recentmenu.dwithhold.72ce2abeRt53UE&_path_=buyer2017Base/2017buyerbase_trade/withhold-manage`,
  );
}
let isUere = false;

function upContentrNowe() {
  isUere = true;
  payOrder.purchaseGoodsFun();
}
function afterCloseFunc() {
  isUere && payOrder.getList && payOrder.getList();
  isUere = false;
}
</script>

<template>
  <a-modal
    v-model:open="openStatus"
    :after-close="afterCloseFunc"
    bodt-class="bouernghser"
    class="asnjehr"
    style="top: 50px; width: 1400px; padding: 0"
  >
    <template #title>
      <a-space>
        <div>{{ payTypeName }}</div>
        <div>
          <a-space class="text-xs">
            <div>采购账号:</div>
            <img
              :src="svg1688"
              alt=""
              style="width: 16px; border-radius: 4px"
            />
            <div>{{ nowUse1688Shop.shopName }}</div>
            <a-space
              v-if="!nowUse1688Shop.isvOpenPay"
              :size="0"
              class="text-red-600"
            >
              <div>当前采购账号未开通免密支付，无法完成下单</div>
              <a-button type="link" @click="toOpen1688Pay">去开通</a-button>
            </a-space>
          </a-space>
        </div>
      </a-space>
    </template>
    <template #footer>
      <div class="flex w-full items-center justify-between">
        <a-space :size="1">
          <div>共</div>
          <div class="text-red-600">{{ selectItemInfos.length }}</div>
          <div>笔订单，</div>
          <div>符合条件</div>
          <div class="text-red-600">{{ inLine.length }}</div>
          <div>笔</div>
        </a-space>
        <a-space>
          <a-space direction="vertical">
            <a-space
              v-if="!nowUse1688Shop.isvOpenPay"
              :size="0"
              class="text-red-600"
            >
              <div>当前采购账号未开通免密支付，无法完成下单</div>
              <a-button size="small" type="link" @click="toOpen1688Pay">
                去开通
              </a-button>
            </a-space>
            <div
              v-if="!inLine || inLine.length === 0"
              class="text-xs text-red-500"
            >
              当前所选订单没有符合({{ payTypeName }})的项
            </div>
          </a-space>
          <a-button :loading="upPterLodin" @click="openStatus = false">
            取消
          </a-button>
          <a-button
            :disabled="
              !inLine || inLine.length === 0 || !nowUse1688Shop.isvOpenPay
            "
            :loading="upPterLodin"
            type="primary"
            @click="upContentrNowe"
          >
            {{ payTypeName }}
          </a-button>
          <!-- <a-button type="primary" @click="upContentrNowetest">120045</a-button> -->
        </a-space>
      </div>
    </template>
    <a-spin :spinning="upPterLodin || auto1688storTres.lodingGetShop">
      <BodyContent />
    </a-spin>
  </a-modal>
</template>

<style lang="scss">
.asnjehr {
  // .ant-modal-content {
  //   padding: 0;
  // }
  .bouernghser {
    height: 700px;
    padding: 0;
  }
}
</style>
